<!-- 
  ref和reactive
  1、如果基本类型使用ref
  2、如果是对象类型，更改的是对象中的属性值或者是数组中的成员值，使用reactive
     但是如果要更改的是对象的地址引用或者是数组的地址引用只能使用ref
  3、ref的底层实现机制ES5的Object.defineProperty的方式来实现数据劫持的
     reactive是采用的是ES6中Proxy代理集合Reflect的方式来实现的
 -->
<template>
  <div>
    {{ students }}
  </div>
  <div>
    <button @click="modifyStudentNameByIndex">修改</button>
  </div>
  <div>
    <button @click="updateStudents">修改</button>
  </div>
</template>

<script lang='ts' setup>
import { ref} from 'vue'
let students=ref<Array<string>>(["giles","monica","peter","jack","jerry"])
const modifyStudentNameByIndex=()=>{
  students.value[2]="lucy"
}
const updateStudents=()=>{
  students.value=["翟吉喆","莫妮卡","皮特","杰克","吉瑞"]
  console.log('students',students);
  
}
</script>

<style lang='scss' scoped>
</style>